<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta http-equiv="Pragma" content="no-cache"> 
<meta http-equiv="Cache-Control" content="no-cache"> 
<meta http-equiv="Expires" content="0"> 
<title>后台管理登录</title> 

<link rel="stylesheet" type="text/css" href="/Public/css/admin/login.css"/>
<style type="text/css">
	#login_from{
		display: none;
	}
	#swich_btn{
		position: absolute;
		right: 20px;
	}
	#qrcode_box{
		position: relative;
	}
	.tips_txt{
		display: none;
		position: absolute;
		width: 100%;
		text-align: center;
		/*margin-top: 80px;*/
		font-size: 1.5rem;
	}
	.tips_txt img{
		width: 150px;
		height: 150px;
		border-radius: 50%;
	}
	.name{
		font-size: 1.5rem;
		margin-top: 1rem;
	}
</style>
</head> 
<body onload="connect();"> 

<div class="login">
    <div class="message">CJ_BLOG-管理登录  <span style="cursor: pointer;" id="swich_btn">账号密码登录</span></div>
    <div id="darkbannerwrap"></div>
    <div id="qrcode_box" style="text-align: center;">
    	<div class="tips_txt">
    		<!--<img src="http://www.apicloud.com/icon/6e/bf/6ebf9cf8d803d40a01df4444f0d7c9df.png"  class="head_img" alt="" />
    		<p>扫码成功！授权后登录。</p>
    		<p class="name">suo</p>-->
    	</div>
		<!--<input id="qrcode" name="qrcode" value="<?php echo session_id(); ?>" required="" type="hidden">-->
		<!--<div id="cs_qrpic"><img src="http://localhost/home/qrcode/index/uid/'<?php echo session_id(); ?>'" ></div>-->
    	<?php get_qrcode_img(session_id()); ?>
    		
    </div>
    <form id="login_from" method="post" action="check_login.php">
		<input name="action" value="login" type="hidden">
		<input name="username" placeholder="用户名" required="" type="text">
		<hr class="hr15">
		<input name="password" placeholder="密码" required="" type="password">
		<hr class="hr15">
		<input value="登录" style="width:100%;" type="button" onclick="login.check()">
		<hr class="hr20">
		 帮助 <a onClick="alert('请联系管理员')">忘记密码</a> 
	</form>

	
</div>

<div class="copyright">© 2016 design by <a href="http://www.isuoge.com/" target="_blank">isuoge</a></div>

	<script src="/Public/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="/Public/js/dialog/layer.js" type="text/javascript" charset="utf-8"></script>
	<script src="/Public/js/dialog.js" type="text/javascript" charset="utf-8"></script>
	<script src="/Public/js/admin/login.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$("#swich_btn").click(function  () {
			if($("#login_from").is(':hidden')){
				$("#qrcode_box").hide();
				$("#login_from").show();
				$(this).text('扫码登录');
			}else{
				$("#qrcode_box").show();
				$("#login_from").hide();
				$(this).text('账号密码登录');
			}
		});
	
//		longajax ();
		
		function ajaxselect () {
//			setTimeout(function function_name () {
				console.log('发起请求');
				login.checkqrcode();
//			},5000);
		}
	 	
	 	function longajax () {
	 		login.checkscan('init');
	 	}
	 	
	   var ws, name, client_list={};
	 	
	 	// 连接服务端
	    function connect() {
	       // 创建websocket
	       ws = new WebSocket("ws://"+document.domain+":7272");
	       // 当socket连接打开时，输入用户名
	       ws.onopen = onopen;
	       // 当有消息时根据消息类型显示不同信息
	       ws.onmessage = onmessage; 
	       ws.onclose = function() {
	    	  console.log("连接关闭，定时重连");
	          connect();
	       };
	       ws.onerror = function() {
	     	  console.log("出现错误");
	       };
	    }
	    
	    // 连接建立时发送登录信息
   		function onopen(){
	        // 登录
	        var name = $('#qrcode').val();
	        var login_data = '{"type":"login","client_name":"'+name+'","room_id":"1"}';
	        console.log("websocket握手成功，发送登录数据:"+login_data);
	        ws.send(login_data);
	    }
		
		// 服务端发来消息时
	    function onmessage(e){
	        console.log(e.data);
	        var data = eval("("+e.data+")");
	        switch(data['type']){
	            // 服务端ping客户端
	            case 'ping':
	                ws.send('{"type":"pong"}');
	                break;
	            // 登录 更新用户列表
	            case 'login':
	                //{"type":"login","client_id":xxx,"client_name":"xxx","client_list":"[...]","time":"xxx"}
	                say(data['client_id'], data['client_name'],  data['client_name']+' 加入了聊天室', data['time']);
	                
	                
//	                console.log(data['client_name']+"登录成功");
	                break;
	            // 发言
	            case 'say':
	                //{"type":"say","from_client_id":xxx,"to_client_id":"all/client_id","content":"xxx","time":"xxx"}
	                say(data['from_client_id'], data['from_client_name'], data['content'], data['time']);
	                break;
	            // 用户退出 更新用户列表
	            case 'logout':
	                //{"type":"logout","client_id":xxx,"time":"xxx"}
	                say(data['from_client_id'], data['from_client_name'], data['from_client_name']+' 退出了', data['time']);
	                delete client_list[data['from_client_id']];
	                break;
	            case 'scan': 
	            	console.log("扫码了"); 
//	            	var html = '<div class="cs_has_scan">扫码成功！授权后登录。</div> ';
					var html = '<img src="'+data['head_img']+'"  class="head_img" alt="" /><p>扫码成功！授权后登录。</p><p class="name">'+data['realname']+'</p>'; 
					$(".tips_txt").html(html);
					$("#cs_qrpic").hide();
					$(".tips_txt").show();
	            	break;	
	            case 'login_success': 
	            	console.log("确认登录"); 
//	            	var html = '<div class="cs_has_scan">已确认登录，稍后跳转。。。</div> ';
					$(".tips_txt").html('已确认登录，稍后跳转。。。');
	            	setTimeout(function  () {
	            		location.href='/admin/login';
	            	},1000);
	            	break;
	            case 'login_cancel': 
	            	console.log("取消登录"); 
	            	$(".tips_txt").html('卧擦！用户取消登录0.0~');
	            	
	            	
	            	setTimeout(function  () {
	            		$(".tips_txt").hide();
						$("#cs_qrpic").show();
	            	},2000);
	            	break;	
	        }
	    }
		
	function say(from_client_id, from_client_name, content, time){
		console.log('来自'+from_client_id+'的'+from_client_name+'内容为'+content);
    	
    }
	</script>
</body>
</html>
